<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口</title>
    <link th:href="@{/css/mobile.css}" rel="stylesheet">
    <style>
    </style>
    <script type="text/javascript" th:src="@{/script/jquery-1.7.2.js}"></script>
</head>
<body>
<div th:each="food:${foods}" class="right-list" style="height: 15vh">
    <div class="right-text-box">
        <p style="margin: 0;display: inline" th:text="${food.getName()}"></p>
        <p style="margin: 0;display: inline" th:text="'价格'+${food.getPrice()}"></p>
        <br>
        <p th:if="${food.getStatus()}=='able'" style="margin: 0;display: inline;color: #0066ff" th:id="${food.getId()}+'_status'">已上架</p>
        <p th:if="${food.getStatus()}=='unable'" style="margin: 0;display: inline;color: #ff0000" th:id="${food.getId()}+'_status'">已下架</p>
    </div>
    <button th:onclick="menuAble([[${food.getId()}]])"
            class="btn-addToCart" style="top: 1vh;">上架
    </button>
    <button th:onclick="menuUnable([[${food.getId()}]])"
            class="btn-addToCart" style="top: 8vh">下架
    </button>
</div>
</body>
<script>
    function menuAble(fid){
        document.getElementById(fid+'_status').style.color = '#0066ff';
        document.getElementById(fid+'_status').innerText = "已上架";
        $.getJSON("/alertStatus","action=alertStatus&fid="+fid+'&status=able');
    }
    function menuUnable(fid){
        document.getElementById(fid+'_status').style.color = '#ff0000';
        document.getElementById(fid+'_status').innerText = "已下架";
        $.getJSON("/alertStatus","action=alertStatus&fid="+fid+'&status=unable');
    }
</script>
</html>